<template>
  <div class="top-students-container">
    <n-h3 style="margin: 0 0 16px 0;">🏆 学霸指数图谱</n-h3>
    
    <n-radio-group v-model:value="viewMode" name="viewMode" style="margin-bottom: 20px;">
      <n-radio-button 
        v-for="mode in viewModes" 
        :key="mode.value" 
        :value="mode.value"
        :label="mode.label"
      />
    </n-radio-group>
    
    <div v-if="loading" style="text-align: center; padding: 50px;">
      <n-spin size="large" />
      <div style="margin-top: 10px; color: #666;">数据加载中...</div>
    </div>
    
    <div v-else class="chart-wrapper">
      <v-chart 
        v-if="viewMode === 'graph'"
        :option="graphOption" 
        autoresize 
        style="background-color: #ffffff; height: 600px; border-radius: 8px;"
      />
      
      <v-chart
        v-else
        :option="rankOption"
        autoresize
        style="background-color: #ffffff; height: 500px; border-radius: 8px;"
      />
    </div>
    
    <div class="table-area">
      <n-h4 style="margin: 20px 0 10px 0;">🎖️ 榜上有名 - TOP学霸</n-h4>
      <n-data-table
        :columns="columns"
        :data="tableData"
        :bordered="true"
      />
      
      <div class="pagination-wrapper">
        <n-pagination
          v-model:page="pagination.page"
          :page-count="pagination.pageCount"
          :page-size="pagination.pageSize"
          @update:page="handlePageChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { 
  NH3, NH4,
  NRadioGroup, NRadioButton,
  NDataTable,
  NPagination,
  NSpin
} from 'naive-ui'
import { use } from 'echarts/core'
import { GraphChart, BarChart } from 'echarts/charts'
import { 
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  VisualMapComponent
} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import VChart from 'vue-echarts'

import { getTopTenScholarIndex } from "@/api/scholarIndex"

use([
  GraphChart,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  VisualMapComponent,
  CanvasRenderer
])

// 视图模式配置
const viewModes = ref([
  { label: '关系图谱', value: 'graph' },
  { label: '排行榜', value: 'rank' }
])
const viewMode = ref('graph')

// 分页配置
const pagination = ref({
  page: 1,
  pageSize: 5,
  pageCount: 1
})

const handlePageChange = (page) => {
  pagination.value.page = page
}

// 数据加载状态
const loading = ref(false)

// 学院颜色映射
const collegeColors = {
  '信息学院': '#5470C6',
  '动物科技学院': '#91CC75',
  '林学院': '#FAC858',
  '农学院': '#EE6666',
  '植物保护学院': '#73C0DE',
  '园艺科学与工程学院': '#3BA272',
  '机械与电子工程学院': '#FC8452',
  '经济管理学院': '#9A60B4',
  '食品科学与工程学院': '#EA7CCC',
  '生命科学学院': '#60C0DD',
  '外国语学院': '#7C51ED',
  '公共管理学院': '#E87C25',
  '水利土木工程学院': '#B5C334',
  '资源与环境学院': '#F58FDB',
  '化学与材料科学学院': '#1E9593',
  '国际交流学院': '#F7699D',
  '体育学院': '#5D7092',
  '艺术学院': '#6E7074',
  '马克思主义学院': '#C1232B',
  '继续教育学院': '#875F43'
}

// 学院名称映射函数
const mapCollegeName = (collegeName) => {
  // 根据API返回的学院名称，映射到前端定义的学院名称
  const nameMap = {
    '信息科学与工程学院': '信息学院',
    '信息学院': '信息学院',
    '动物科技学院': '动物科技学院',
    '林学院': '林学院',
    '农学院': '农学院',
    '植物保护学院': '植物保护学院',
    '园艺科学与工程学院': '园艺科学与工程学院',
    '机械与电子工程学院': '机械与电子工程学院',
    '经济管理学院': '经济管理学院',
    '食品科学与工程学院': '食品科学与工程学院',
    '生命科学学院': '生命科学学院',
    '外国语学院': '外国语学院',
    '公共管理学院': '公共管理学院',
    '水利土木工程学院': '水利土木工程学院',
    '资源与环境学院': '资源与环境学院',
    '化学与材料科学学院': '化学与材料科学学院',
    '国际交流学院': '国际交流学院',
    '体育学院': '体育学院',
    '艺术学院': '艺术学院',
    '马克思主义学院': '马克思主义学院',
    '继续教育学院': '继续教育学院'
  }
  
  return nameMap[collegeName] || collegeName
}

// API调用函数
const fetchData = async () => {
  loading.value = true
  try {
    const response = await getTopTenScholarIndex()
    const apiData = response.data.data || []
    
    // 处理API返回的数据
    // API返回格式: [{"studentId":"2023214020","name":"彭博涵","province":"山东","city":"聊城","college":"动物科技学院","major":"动物医学","scholarIndex":95}, ...]
    const processedData = apiData.map((item, index) => ({
      id: item.studentId,
      name: item.name,
      score: item.scholarIndex,
      rank: index + 1,
      college: mapCollegeName(item.college), // 映射学院名称
      major: item.major,
      grade: item.studentId.substring(0, 4) + '级', // 从studentId提取年级
      gender: '', // API没有提供性别信息
      province: item.province,
      city: item.city
    }))
    
    studentData.value = processedData
  } catch (error) {
    console.error('获取数据失败:', error)
    // 可以在这里添加错误提示
  } finally {
    loading.value = false
  }
}

// 初始化数据
onMounted(() => {
  fetchData()
})

// 模拟学霸数据（作为备用数据）
const studentData = ref([
  { id: 1, name: '张明', score: 98, grade: '2022级', college: '农学院', major: '农学', gender: '男' },
  { id: 2, name: '李华', score: 95, grade: '2023级', college: '植物保护学院', major: '植物保护', gender: '女' },
  { id: 3, name: '王伟', score: 93, grade: '2022级', college: '资源与环境学院', major: '环境科学', gender: '男' },
  { id: 4, name: '赵雪', score: 92, grade: '2024级', college: '林学院', major: '林学', gender: '女' },
  { id: 5, name: '刘芳', score: 91, grade: '2023级', college: '园艺科学与工程学院', major: '园艺', gender: '女' },
  { id: 6, name: '陈晨', score: 90, grade: '2022级', college: '动物科技学院', major: '动物科学', gender: '男' },
  { id: 7, name: '杨光', score: 89, grade: '2024级', college: '机械与电子工程学院', major: '机械工程', gender: '男' },
  { id: 8, name: '周雨', score: 88, grade: '2023级', college: '经济管理学院', major: '经济学', gender: '女' },
  { id: 9, name: '吴迪', score: 87, grade: '2022级', college: '食品科学与工程学院', major: '食品科学', gender: '男' },
  { id: 10, name: '郑爽', score: 86, grade: '2024级', college: '生命科学学院', major: '生物技术', gender: '女' },
  { id: 11, name: '钱强', score: 85, grade: '2023级', college: '农学院', major: '种子科学', gender: '男' },
  { id: 12, name: '孙丽', score: 84, grade: '2022级', college: '植物保护学院', major: '农药学', gender: '女' }
])

// 学霸列表（按分数排序）
const topStudents = computed(() => {
  return [...studentData.value]
    .sort((a, b) => b.score - a.score)
    .map((item, index) => ({
      rank: index + 1,
      ...item
    }))
})

// 分页表格数据
const tableData = computed(() => {
  pagination.value.pageCount = Math.ceil(topStudents.value.length / pagination.value.pageSize)
  const start = (pagination.value.page - 1) * pagination.value.pageSize
  const end = start + pagination.value.pageSize
  return topStudents.value.slice(start, end)
})

// 表格列配置
const columns = ref([
  { title: '排名', key: 'rank', width: 80 },
  { title: '姓名', key: 'name', width: 100 },
  { 
    title: '学霸指数', 
    key: 'score', 
    width: 100,
    render: (row) => {
      return `${row.score}分`
    }
  },
  { title: '学院', key: 'college', width: 150 },
  { title: '专业', key: 'major', width: 150 },
  { title: '年级', key: 'grade', width: 100 }
])

// 图谱配置
const graphOption = computed(() => {
  // 只显示前10名学霸节点
  const top10Nodes = topStudents.value.slice(0, 10).map(student => ({
    id: student.id,
    name: student.name,
    symbolSize: 65 - (student.rank * 4), // 修正后：第1名=61，第10名=25
    value: student.score,
    category: student.college,
    itemStyle: {
      color: collegeColors[student.college] || '#999'
    },
    label: {
      show: true,
      fontSize: 12,
      fontWeight: 'bold',
      formatter: `NO.${student.rank} {b}`
    },
    ...student
  }))

  return {
    title: {
      text: '学霸TOP10图谱',
      subtext: '节点大小代表排名高低（第1名最大）',
      left: 'center',
      top: 10
    },
    tooltip: {
      formatter: params => {
        return `
          <div style="font-weight:bold">NO.${params.data.rank} ${params.data.name}</div>
          <div>学霸指数: ${params.data.score}分</div>
          <div>${params.data.college}-${params.data.major}</div>
          <div>${params.data.grade} ${params.data.gender}</div>
        `
      }
    },
    legend: {
      data: [...new Set(top10Nodes.map(node => node.college))],
      top: 50,
      textStyle: {
        fontSize: 12
      }
    },
    series: [{
      name: '学霸TOP10',
      type: 'graph',
      layout: 'force',
      force: {
        repulsion: 150,
        edgeLength: 100,
        gravity: 0.2
      },
      draggable: true,
      data: top10Nodes,
      categories: [...new Set(top10Nodes.map(node => ({
        name: node.college,
        itemStyle: {
          color: collegeColors[node.college]
        }
      })))],
      roam: true,
      focusNodeAdjacency: false,
      label: {
        show: true,
        position: 'right'
      },
      emphasis: {
        scale: true,
        label: {
          show: true
        }
      },
      symbol: 'circle'
    }],
    animationDuration: 1500
  }
})

// 排行榜配置
const rankOption = computed(() => {
  const currentData = topStudents.value.slice(0, 10)
  const reversedData = [...currentData].reverse() // 反转数据顺序
  
  return {
    title: {
      text: '学霸指数排行榜',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: params => {
        const data = params[0].data
        return `
          <div style="font-weight:bold">NO.${data.rank} ${data.name}</div>
          <div>学霸指数: ${data.value}分</div>
          <div>${data.college}-${data.major}</div>
        `
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      name: '学霸指数',
      axisLine: {
        show: true
      },
      max: 100
    },
    yAxis: {
      type: 'category',
      data: reversedData.map(item => item.name), // 使用反转后的数据
      axisLabel: {
        formatter: (value, index) => {
          const student = reversedData[index]
          return `NO.${student.rank} ${value}`
        }
      }
    },
    series: [{
      name: '学霸指数',
      type: 'bar',
      data: reversedData.map(item => ({ // 使用反转后的数据
        name: item.name,
        value: item.score,
        rank: item.rank,
        college: item.college,
        major: item.major,
        itemStyle: {
          color: collegeColors[item.college] || '#999'
        }
      })),
      label: {
        show: true,
        position: 'right',
        formatter: '{c}分'
      },
      barWidth: '60%'
    }]
  }
})

// 响应式处理
const isMobile = ref(window.innerWidth < 768)
onMounted(() => {
  window.addEventListener('resize', () => {
    isMobile.value = window.innerWidth < 768
  })
})
</script>

<style scoped>
.top-students-container {
  padding: 16px;
  background-color: #f7f8fa;
  border-radius: 8px;
  max-width: 100%;
  overflow-x: hidden;
}

.n-radio-group {
  margin-right: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.chart-wrapper {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 20px;
}

.table-area {
  width: 100%;
  margin-top: 20px;
  overflow-x: auto;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding: 12px 0;
}

:deep(.n-data-table) {
  border-bottom: none;
  margin-bottom: 0;
  min-width: 100%;
}

@media (max-width: 768px) {
  .top-students-container {
    padding: 12px;
  }
  
  .chart-wrapper {
    height: 400px !important;
  }
  
  :deep(.n-radio-button) {
    padding: 0 8px;
    font-size: 12px;
  }
  
  :deep(.n-data-table th),
  :deep(.n-data-table td) {
    padding: 8px 12px;
    font-size: 12px;
  }
  
  .pagination-wrapper {
    margin-top: 15px;
    padding: 8px 0;
  }
}
</style>